import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import reqwest from 'reqwest';
import {Link} from 'dva/router'
import {AutoComplete, Button,Row,Col,Icon,Layout,Input,Form,Breadcrumb,Select,Affix,Card,Modal,message,Cascader} from 'antd';
import style from '../../styles/ResetInput.less';
import inStyle from '../../styles/Info.less';
import {numvail,selectvail} from '../../utils/Validator.js'
// import CityPick from '../../components/CityPick.js';
import options from '../../models/CityData.js';
const FormItem = Form.Item;
const Option =Select.Option;
const AutoOption = AutoComplete.Option;
class CustomerDetails extends React.Component{
	constructor(props){
		super(props)
		this.state={
			result:[],
			province:'',
			city:'',
			area:'',
			patch:this.props.location.pathname==='/app/editcus'?'编辑':'新建',
			loading:false
		}
	}
  pacthServer(params={}){
  	this.setState({loading:true});
    // const {province, city,area,street} =this.state;
    let _this = this
  	reqwest({
      url: window.host+'/api/customers/'+this.props.location.query.ims,
      method: 'post',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
        customer:{name:params.customer.name,tel:params.customer.tel,province:params.province,city:params.city,area:params.area,street:params.customer.street,remark:params.customer.remark}
      },
      type: 'json',
    }).then((data) => {
      if(data.status=='success'){
				message.success('更新成功',1,()=>{
					window.location.hash='/app/customers?current='+_this.props.location.query.current;
				})
			}else{
				this.setState({loading:false});
				message.warning(data.msg,1)
			}
    }).fail((err)=>{
    	this.setState({loading:false});
			console.log(2)
		})

  }
	handleSubmit(e){
    // console.log(e)
    e.preventDefault();

    const {province, city,area,street} =this.state;
    let _this = this;
    this.props.form.validateFields((err, values) => {
      // console.log(values);
      // _this.setState({province:values.city[0],city:values.city[1],area:values.city[2]});
      if (!err) {
        console.log('Received values of form: ', values);
        if(this.props.location.pathname==='/app/newcus'){
	      	_this.postserver({
	      		province:values.city[0],city:values.city[1],area:values.city[2],
	      		customer:{name:values.name,tel:values.phone,street:values.street,remark:values.remark}
	      	})
        }else{
        	_this.pacthServer({
        		province:values.city[0],city:values.city[1],area:values.city[2],
	      		customer:{name:values.name,tel:values.phone,street:values.street,remark:values.remark}
	      	})
        }
      }
    });
    // console.log(1);
	}
	postserver(params = {}){
		this.setState({loading:true});
		// const {province,city,area} = this.state;
		let _this = this;
		console.log(params)
		reqwest({
      url: window.host+'/api/customers',
      method: 'post',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
        customer:{name:params.customer.name,tel:params.customer.tel,province:params.province,city:params.city,area:params.area,street:params.customer.street,remark:params.customer.remark}
      },
      type: 'json',
    }).then((data) => {
      console.log(1);
      if(data.status=='success'){
      	// console.log(_this.props.location.query.)
				message.success('保存成功',1,()=>{
					window.location.hash='/app/customers?current='+_this.props.location.query.current;
				})
			}else{
				this.setState({loading:false});
				message.warning(data.msg,1)
			}

    }).fail((err)=>{
    	this.setState({loading:false});
			console.log(2)
   			message.error('网络连接失败',1,)
		})
	}
	componentWillMount(){
		console.log(this.props.location.query)
	}
	autoChange(value){
		let result;
		if(!value ||value.indexOf('@') >= 0){
			result = [];
		}else{	
			result=['qq.com','163.com','alibaba.com.cn','126.com','sina.com','139.com','sohu.com'].map(domain => `${value}@${domain}`);
		}
		this.setState({result,email:value});
	}
	render(){
		const formItemLayout = {
      labelCol: { span: 7},
      wrapperCol: { span: 17 },
      // style:{minWidth:200}
    };
    console.log(this.props.location.query.province)
    let _proveint = this.props.location.query.province==undefined?undefined:[this.props.location.query.province,this.props.location.query.city,this.props.location.query.area]
    const emailChildren = this.state.result.map((email) => {
      return <AutoOption key={email}>{email}</AutoOption>;
    });
		const {getFieldDecorator}=this.props.form;
		return(
			<Layout >
				<Layout.Content className={`${style.berad}`} >
					<Row>
						<Breadcrumb  className={`${style.blue_dia_none}`}>
							<Breadcrumb.Item ><span className={`${style.blue_dia}`}></span></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div} ${style.bread_div_first}`}><Link to={{pathname:'/app/customers',query:{current:this.props.location.query.current}}}>客户</Link></Breadcrumb.Item>
              <Breadcrumb.Item className={`${style.bread_div}`}>新建客户</Breadcrumb.Item>
	       		</Breadcrumb>
	       	</Row>
				</Layout.Content>
				<Layout style={{background:'#fff'}}>
				<Form className={`${inStyle.ncc_left_layout}`} onSubmit={this.handleSubmit.bind(this)}>
					<Row style={{marginTop:26}}>
						<Col  className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}}>
							<FormItem {...formItemLayout} label='姓名'>
								{getFieldDecorator('name',{
									initialValue:this.props.location.query.name,
									rules:[{required:true,message:'请输入姓名',}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='姓名'/>
								)}
							</FormItem>
						</Col>
					</Row>
       		<Row>
       			<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}}>
							<FormItem  {...formItemLayout} label='手机'>
								{getFieldDecorator('phone',{
									initialValue:this.props.location.query.phone,
									rules:[{required:true,message:'请输入手机',validator:(rule,value,callback)=>{
										numvail(rule,value,callback);
									}}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入手机' />
								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row>
       			<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}}>
							<FormItem  {...formItemLayout} label='地址'>
								{getFieldDecorator('city',{
									initialValue:this.props.location.query.province==undefined?undefined:[this.props.location.query.province,this.props.location.query.city,this.props.location.query.area],
									rules:[{required:true,message:'请选择地址',validator:(rule,value,callback)=>{
										selectvail(rule,value,callback,'请选择地址')
									}}]
								})(
									<Cascader className={`${style.ncc_reset_input}`} onChange={this.props.onChange}  style={{border:'none'}} options={options}  showSearch  placeholder='省市区' />		
								)}
							</FormItem>
						</Col>
					</Row>
       		<Row >
						<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}}>
							<FormItem  {...formItemLayout} label='详细地址'>
								{getFieldDecorator('street',{
									initialValue:this.props.location.query.street,
									rules:[{required:true,message:'请输入详细地址'}]
								})(
									<Input className={`${style.ncc_reset_input}`} placeholder='请输入详细地址' />
								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row>
	       		<Col className={`${style.reset_col}`}  span={8}>
								<FormItem {...formItemLayout} label='备注'>
								{getFieldDecorator('remark',{
									initialValue:undefined,
								})(
									<Input style={{height:'100px'}} type='textarea' className={`${style.ncc_reset_input} `} placeholder='备注:' />
								)}
							</FormItem>
						</Col>
       		</Row>
       		<Row>
	       		<Col xl={{offset:3}} lg={{offset:2}} sm={{span :8,pull:0}} xs={{span:17,pull:3}}  >
		       		<div  style={{float:'left'}} >
		       			<FormItem >
			            <Button loading={this.state.loading} htmlType="submit" size='large' type="primary"  >
			              保存
			            </Button>
		          	</FormItem>
		          </div>
		          <div  style={{float:'left',marginLeft:10}} >
		          	<Button size='large'  >
			            <Link to={{pathname:'/app/customer',query:{current:this.props.location.query.current}}}>取消</Link>
			          </Button>
		          </div>
	          </Col>
          </Row>
				</Form>	
			</Layout>		
			</Layout>
		)
	}
}
 
 		//<Row type='flex'>
      //  			<Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}}>
						// 	<FormItem  >
						// 		{getFieldDecorator('wxqq')(
						// 			<Input className={`${style.ncc_reset_input}`} placeholder='请输入微信/QQ' />
						// 		)}
						// 	</FormItem>
						// </Col>
						// <Col className={`${style.reset_col}`} sm={{span :8,pull:0}} xs={{span:24,pull:3}}>
						// 	<FormItem  > 
						// 		{getFieldDecorator('fax')(
						// 			<Input className={`${style.ncc_reset_input}`} placeholder='请输入传真' />
						// 		)}
						// 	</FormItem>
						// </Col>
      //  		</Row>
const CustomerDetailsForm = Form.create()(CustomerDetails);

export default connect()(CustomerDetailsForm)
